import React, { Component } from 'react'
import Acom from './components/Acom/Acom'
import Bcom from './components/Bcom/Bcom'

/* 为了防止不同组件内使用了相同的类名，而引起样式冲突，我们需要做以下操作
  1. css文件名：必须以 文件名<font color='red'>.module.css</font> 后缀结尾
  2. 使用import 语法导入css模块并存储成 js变量： import styles from './index.module.css'
  3.使用插值表达式给className赋值，之为 styles中的类名
*/




export default class App extends Component {
  render() {
    return (
      <div>
        {/*这里是使用了bootstrap.css样式库 */}
        <button type='=button' className="btn btn-success">按钮</button>
        {/* 这里由于使用了相同的的样式类名，所以样式是否起作用，看后倒入的样式 */}
        <Acom/>
        <Bcom/>
      </div>
    )
  }
}
